<script setup lang="ts">
import { ref, computed } from 'vue'
import { useGameStore } from '@/stores/modules/game'
import { RECIPE_CONDIMENT_MAP } from '@/stores/mappings'

import type { RecipeCondiment } from '@/stores/types'

const TECHNIQUES_MAP = {
  boil: '煮',
  knife: '切',
  bake: '烤',
  fry: '炸',
  steam: '蒸',
  stirfry: '炒',
} as const

type TechniquesType = keyof typeof TECHNIQUES_MAP

export interface IRecipesModel {
  recipeId1: number | null
  recipeId2: number | null
  recipeId3: number | null
  rarity: number[]
  techniques: TechniquesType[]
  material: number[]
  condiment: RecipeCondiment | null
}

const emit = defineEmits<{ (e: 'updateRecipesModel', data: IRecipesModel): void }>()
const showModal = ref(false)

function open(data: IRecipesModel) {
  showModal.value = true

  formModel.value = { ...data }
}

const rarityOptions = [
  { label: '五星', value: 5 },
  { label: '四星', value: 4 },
  { label: '三星', value: 3 },
  { label: '二星', value: 2 },
  { label: '一星', value: 1 },
]

const techniquesOptions = (Object.keys(TECHNIQUES_MAP) as TechniquesType[]).map((key) => ({
  label: TECHNIQUES_MAP[key],
  value: key,
}))

const condimentOptions = (Object.keys(RECIPE_CONDIMENT_MAP) as RecipeCondiment[]).map((key) => ({
  label: RECIPE_CONDIMENT_MAP[key],
  value: key,
}))

const materialOptions = useGameStore().materials.map((material) => ({
  label: material.name,
  value: material.materialId,
}))

const formModel = ref<IRecipesModel>({
  recipeId1: null,
  recipeId2: null,
  recipeId3: null,
  rarity: [],
  techniques: [],
  material: [],
  condiment: null,
})

const allRecipeIdOptions = computed(() =>
  useGameStore().recipes.map((recipe) => ({
    label: recipe.name,
    value: recipe.recipeId,
  })),
)

/**
 * 选择“菜谱1”的值不能被选在“菜谱2”中，“菜谱3”同理
 * @param excludedIds 需要过滤的值
 */
function getFilteredOptions(excludedIds: (number | null)[]) {
  return allRecipeIdOptions.value.filter((recipe) => !excludedIds.includes(recipe.value))
}

function onConfirm() {
  emit('updateRecipesModel', formModel.value)
  showModal.value = false
}

defineExpose({ open })
</script>

<template>
  <n-modal v-model:show="showModal">
    <n-card style="width: 650px" title="菜谱选择">
      <n-form ref="formRef" label-placement="left" :label-width="60">
        <n-grid :x-gap="16" :cols="2">
          <n-gi :span="2">
            <n-form-item label="菜谱1">
              <n-select
                v-model:value="formModel.recipeId1"
                filterable
                placeholder="请选择"
                :options="getFilteredOptions([formModel.recipeId2, formModel.recipeId3])"
                clearable
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="菜谱2">
              <n-select
                v-model:value="formModel.recipeId2"
                filterable
                placeholder="请选择"
                :options="getFilteredOptions([formModel.recipeId1, formModel.recipeId3])"
                clearable
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="菜谱3">
              <n-select
                v-model:value="formModel.recipeId3"
                filterable
                placeholder="请选择"
                :options="getFilteredOptions([formModel.recipeId1, formModel.recipeId2])"
                clearable
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="星级">
              <n-select
                v-model:value="formModel.rarity"
                multiple
                placeholder="请选择"
                :options="rarityOptions"
                clearable
                max-tag-count="responsive"
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="技法">
              <n-select
                v-model:value="formModel.techniques"
                multiple
                placeholder="请选择"
                :options="techniquesOptions"
                clearable
                max-tag-count="responsive"
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="食材">
              <n-select
                v-model:value="formModel.material"
                multiple
                placeholder="请选择"
                :options="materialOptions"
                clearable
                filterable
                max-tag-count="responsive"
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="调味">
              <n-select
                v-model:value="formModel.condiment"
                placeholder="请选择"
                :options="condimentOptions"
                clearable
              />
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-form>
      <n-flex justify="end">
        <n-button @click="showModal = false">取消</n-button>
        <n-button type="primary" @click="onConfirm">确认</n-button>
      </n-flex>
    </n-card>
  </n-modal>
</template>

<style lang="scss" scoped></style>
